<template>
  <div class="login-container">
    <div class="left">
      <div class="title-box">
        <img src="@/assets/img/login_icon.png" alt="" />
        <span class="title">黑马面面</span>
        <span class="line"></span>
        <span class="sub-title">用户登录</span>
      </div>
      <!-- 
        el-form的属性
         model:绑定的模型值 也是将来要提交给后台服务器的值
         rules:效验的规则写在它里面
         ref:获取整个表单dom节点
         label-width:文字宽度
       -->
      <!-- 
        <el-form-item>的属性
          prop效验规则字段  要和rules中保持一致 
       -->

      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginFormRef"
        class="login-from"
      >
        <!-- 手机号码 -->
        <el-form-item prop="phone">
          <el-input
            v-model="loginForm.phone"
            placeholder="请输入手机号"
            prefix-icon="el-icon-user"
          />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            type="password"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code">
          <el-col :span="16">
            <el-input
              v-model="loginForm.code"
              prefix-icon="el-icon-key"
              placeholder="请输入验证码"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="7">
            <img
              style="width: 100%; margin-left: 15px"
              @click="changeloginCaptchaUrl"
              :src="loginCaptchaUrl"
              class="captcha"
            />
          </el-col>
        </el-form-item>
        <!-- 单选框 -->
        <el-form-item prop="isChecked">
          <el-checkbox v-model="isChecked"> </el-checkbox>
          我已阅读并同意
          <el-link type="primary" :underline="false" target="_blank"
            >用户协议</el-link
          >和
          <el-link type="primary" :underline="false" target="_blank"
            >隐私条款</el-link
          >
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%; margin: 5px 0"
            @click="login"
            >登 录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%; margin: 5px 0"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <img src="@/assets/img/login_bg.png" alt="" />
    </div>
  </div>
</template>

<script>
import { saveToken } from '@/utils/token.js'
export default {
  data () {
    return {
      //需要提交给服务器的登录时候的参数
      loginForm: {
        phone: '18511111111', //手机号码
        password: '12345678', //密码
        code: '' //验证码
      },
      isChecked: false, //是够勾选用户协议
      loginCaptchaUrl: process.env.VUE_APP_BASEURL + 'captcha?type=login', //验证码图片地址
      //规则
      rules: {
        phone: [
          {
            validator: (rule, value, callback) => {
              /* 
              rule:规则
              value:用户输入的值(input)
              callback:决定是否校验ok如果 里面没有值 或者值不符合要求就new Error() callback必须调用
                 里面的return是阻止代码继续运行的
              */
              if (!value) {
                return callback(new Error('号码不能为空'))
              }
              const reg = /^1[3456789][0-9]{9}$/
              if (!reg.test(value)) {
                return callback(new Error('号码不规范'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        password: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error('密码不能为空'))
              }
              if (value.length < 6) {
                return callback(new Error('密码长度不能少于6位'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error('验证码不能为空'))
              }
              if (value.length < 4) {
                return callback(new Error('验证码长度不能少于4位'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        isChecked: [
          {
            validator: (rule, value, callback) => {
              console.log(value)
              console.log(callback)
              if (!this.isChecked) {
                return callback(new Error('必须勾选用户协议'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    changeloginCaptchaUrl () {
      this.loginCaptchaUrl = `${
        process.env.VUE_APP_BASEURL
      }captcha?type=login&t=${new Date() - 0}` //每次都要发送不同的所以后面要使网址不同  加一个$t=随机数 这里随机数用毫秒数代替
    },
    login () {
      //对整个表单最后全部验证
      //async写在最近的函数上
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          return
        }
        const res = await this.$http.post('login', this.loginForm)
        if (res.code === 200) {
          //保存token
          saveToken(res.data.token)
          this.$message({
            showClose: true,
            message: '登录成功',
            type: 'success'
          }),
            //跳转网页
            //编程式导航
            this.$router.push('/layout')
          console.log(res.message)
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
          this.changeloginCaptchaUrl()
          console.log(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less">
.login-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(225deg, #1493fa, #01c6fa);
}
.login-container .left {
  width: 478px;
  height: 550px;
  background: #f5f5f5;
  padding: 48px;
}
.login-container .left .title-box {
  display: flex;
  align-items: center;
}
.login-container .left .title-box img {
  width: 22px;
  height: 17px;
  margin-right: 16px;
}
.login-container .left .title-box .title {
  font-size: 24px;
  margin-right: 14px;
}
.login-container .left .title-box .line {
  width: 1px;
  background-color: #c7c7c7;
  height: 27px;
  margin-right: 12px;
}
.login-container .left .title-box .sub-title {
  font-size: 22px;
}
.login-from {
  margin-top: 30px;
}
.captcha {
  width: 100%;
  height: 40px;
}
</style>
